<template>
  <div class="app-container">
    <el-container>
      <!-- 👇 左侧drawer 👇 -->
      <transition name="el-zoom-in-center">
        <el-aside style="background: white;margin-left: -19px;margin-top: -20px;z-index: 1001;width:370px"
                  v-show="drawer" class="transition-box">
          <el-row>
            <el-col :span="19">
              <el-form ref="queryForm" :model="queryForm" label-width="80px">
                <el-form-item label="选择患者:">
                  <el-input placeholder="患者名" @input="notify" v-model="queryForm.name"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" icon="el-icon-refresh" style="margin-left: 15px;" circle
                         @click="loadPatient"></el-button>
            </el-col>
          </el-row>
          <el-tabs v-model="personalName" style="margin-left: 2px">
            <el-tab-pane label="个人" name="personal">
              <el-tag style="width: 100%;">待诊患者</el-tag>
              <patient_table :patient="queryTobeParams" @patient="patientInfo"></patient_table>
              <el-tag style="width: 100%;margin-top: 50px" type="success">诊中患者</el-tag>
              <patient_table :patient="queryTogoParams" :name="patient_Info.patientName" @patient="patientInfo"></patient_table>
              <el-tag style="width: 100%;margin-top: 50px" type="warning">已诊患者</el-tag>
              <patient_table :patient="queryToExParams" :name="patient_Info.patientName" @patient="patientInfo"></patient_table>
            </el-tab-pane>
            <el-tab-pane label="科室" name="deptName">
              <el-tag style="width: 100%;">待诊患者</el-tag>
              <patient_table :patient="queryToDeParams" :name="patient_Info.patientName" @patient="patientInfo"></patient_table>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
      </transition>
      <!-- 👆 左侧drawer 👆 -->

      <!--  👇主体部分 门诊功能信息👇  -->
      <el-main style="margin-top: -17px;">
        <!-- 👇 头部 显示当前病人信息👇 -->
        <el-header>
          <el-row style="width: 900px;">
            <el-col :span="2">
              <el-button type="primary" @click="leftDrawer" :icon="iconDrawer" circle></el-button>
            </el-col>
            <el-col :span="2">
              <el-tag color="white" style="border: none;color: black;">当前病人:</el-tag>
            </el-col>
            <el-col :span="3">
              <el-tag effect="plain" style="width: 100px;margin-right: 50px">
                姓名:<strong>{{patient_Info.patientName}}</strong></el-tag>
            </el-col>
            <el-col :span="6">
              <el-tag effect="plain" style="width: 200px;">就诊号:<strong>{{patient_Info.medicalRecordNo}}</strong>
              </el-tag>
            </el-col>
            <el-col :span="3">
              <el-tag effect="plain" style="width: 100px;">性别:<strong>{{patient_Info.gender}}</strong></el-tag>
            </el-col>
            <el-col :span="5">
              <el-tag effect="plain" style="width: 100px;">年龄:<strong>{{patient_Info.patientAgeStr}}</strong></el-tag>
            </el-col>
            <el-col :span="1">
              <el-button type="text" size="mini" icon="el-icon-success">诊毕</el-button>
            </el-col>
          </el-row>
        </el-header>
        <!-- 👆头部 显示当前病人信息👆 -->
        <el-tabs v-model="HomeName">
          <el-tab-pane label="病历首页" name="home">
            <home_Medical></home_Medical>
          </el-tab-pane>
          <el-tab-pane label="检查申请" name="Check">
            <check></check>
          </el-tab-pane>
          <el-tab-pane label="检验申请" name="inspect">
            <inspection></inspection>
          </el-tab-pane>
          <el-tab-pane label="门诊确诊" name="outpatient">
            <clinic :registrationId="3"></clinic>
          </el-tab-pane>
          <el-tab-pane label="成药处方" name="prescription">
            <medicine></medicine>
          </el-tab-pane>
          <el-tab-pane label="草药处方" name="herbalPrescription">
            <herbal></herbal>
          </el-tab-pane>
          <el-tab-pane label="处置申请" name="disposal">
            <disposition :registrationId="4" :type="3"></disposition>
          </el-tab-pane>
          <el-tab-pane label="患者账单" name="bill">
            <patients_bills :registrationId="44"></patients_bills>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <!-- 👆主体部分 门诊功能信息👆 -->

      <!--  👇遮罩层👇  -->
      <transition name="el-fade-in-linear">drawer
        <div v-if="showModal" id="mask" class="transition-box" @click="clickModal"></div>
      </transition>
      <!--  👆遮罩层👆    -->
    </el-container>
  </div>
</template>

<script>
  //病历首页
  import home_Medical from '@/layout/components/dms/medicalRecordHome'
  //检查申请
  import check from '@/layout/components/dms/check_application'
  //检验申请
  import inspection from '@/layout/components/dms/inspection_application'
  //门诊确诊
  import clinic from '@/layout/components/dms/clinic_diagnosis'
  //成药处方
  import medicine from '@/layout/components/dms/medicine_prescription'
  //草药处方
  import herbal from '@/layout/components/dms/herbal_prescription'
  //处置申请
  import disposition from '@/layout/components/dms/disposition_application'
  //患者账单
  import patients_bills from '@/layout/components/dms/patient_bills'
  //患者表格
  import patient_table from '@/layout/components/tool/patient_table'

  export default {
    name: "doctor",
    components: {
      home_Medical, patients_bills,
      check, inspection,
      clinic, medicine,
      herbal, disposition,
      patient_table
    },
    data() {
      return {
        //左边抽屉和图标
        drawer: true,
        direction: 'ltr',
        iconDrawer: 'el-icon-arrow-left',
        //Tab切换首项home
        HomeName: 'home',
        personalName: 'personal',
        //遮罩层
        showModal: true,
        //患者查询
        queryForm: {},
        //患者信息
        patient_Info: {
          patientName: null,
          medicalRecordNo: null,
          gender: null,
          patientAgeStr: null
        },
        //患者查询条件
        queryTobeParams: {}, queryTogoParams: {}, queryToExParams: {}, queryToDeParams: {}
      }
    },
    created() {
      this.getPatient();
    },
    methods: {
      /** 弹抽屉 */
      leftDrawer() {
        this.showModal = true;
        this.drawer = true;
        this.iconDrawer = 'el-icon-arrow-left';
      },
      /** 关抽屉 */
      clickModal() {
        this.drawer = false;
        this.showModal = false;
        this.iconDrawer = 'el-icon-arrow-right';
      },
      /** 患者查询初始条件*/
      getPatient() {
        this.queryTobeParams = {status: 1, staffId: 2};
        this.queryTogoParams = {status: 2, staffId: 2},
        this.queryToExParams = {status: 3, staffId: 2},
        this.queryToDeParams = {deptId: 1,staffNoId:2}
      },
      /** 患者名称input改变事件 */
      notify(val) {
        this.queryTobeParams = {status: 1, staffId: 2, name: val};
        this.queryTogoParams = {status: 2, staffId: 2, name: val},
        this.queryToExParams = {status: 3, staffId: 2, name: val},
        this.queryToDeParams = {deptId: 1, staffNoId:2}
      },
      /** 子传父事件并赋值 */
      patientInfo(msg) {
        this.patient_Info = {};
        this.patient_Info = msg;
        this.clickModal();
        this.getPatient();
      },
      /** 刷新 */
      loadPatient() {
        this.queryForm = {}
        this.getPatient();
      }
    }
  }
</script>

<style>
  * {
    list-style: none;
  }

  #mask {
    background-color: rgb(0, 0, 0);
    opacity: 0.3;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;;
    height: 100%;
    right: 0px;
    z-index: 1000
  }

  .el-header {
    line-height: 60px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

  strong {
    color: black;
    margin-left: 15px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .your-table .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .your-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }


</style>
